前兩篇介紹了JSX，稍微熟悉之後就正式地介紹一下React這位朋友。首先React是Library 不是Framework，雖然滿多人提到前端框架時，都會把React算進去，甚至面試時面試官也弄錯。

註: 庫(Library)與 框架(Framework)的差別

• 當你在調用Library的時候， 你按照自己的意願來control他（比如jQuery）。
• 對於framework， 那麼control就是倒轉過來了，是他在調用你（比如bootstrap)。

*關於React

大約在2010年時，Facebook開發團隊發現網站功能越多觸發頁面的事件越多，前端資料狀態的變化和DOM結構也越來越頻繁，前端的程式越來越難以維護，每次維護都是浩大的工程。
因此React就產生了
2011年-React開始時做來解決上述的問題
2013年-Instagram 使用React進行改版，也在Github上開放程式碼。

*出發點

原因是基於HTML前端介面變得越來越複雜，最根本的問題是如何將來自於伺服器端或使用者輸入的動態數據快速的反應到複雜的介面上，來自Facebook的React Library是能夠完全解決此問題的。出發點就是用於開發數據不斷變化的大型應用程式。

*概念

• 虛擬DOM(Virtual DOM)
• Diff算法(虛擬DOM的加速器，提升React性能的法寶)

*虛擬DOM

首先來討論DOM的問題，它的速度很慢，看到JS比他快很多倍，如果要用JS在前端即時改變UI的話，哪怕只是增加一點點小東西，也要整個重新重新繪製，如果大量操作元件的話效能就很不好。

其實就是用一個物件來描述DOM，透過比對前後兩者的差異，最終只把有變化的部分重新渲染，提高渲染的效率。而為什麼要用虛擬DOM，因為當DOM更改時需要遍歷，而原生DOM可遍歷的屬性多達231個，且大部分與渲染無關，更新頁面的代價太。

*Diff算法

當使用React的時候，在某個時間點render()建立了一個React元件樹，在下一個state或者prop更新時，render()將建立一個新的React元件樹，React將對比這兩個元件樹不同之處，計算出如何高效的更新UI(只更新有變化的地方)。Diff算法有幾種:

1. 如果兩個元件樹的根元件不同，React會銷毀舊樹，建立新樹。
2. 對於類型相同的React DOM元素，React會比對兩者的屬性是否相同，址更新不同(有改變)的屬性。

React特色

1. 用純JS在前端產生HTML(一般來說是在後端產生HTML送到前端)。
2. 使用Virtual DOM，每次重新繪製時效率高。
3. 可自定義Component(元件)，方便開發。
4. 父和子元件可透過props通訊
5. 只負責MVC的View部分
6. 完全是JS操作UI，使得可以跟後端分離，達到即時互動、自動更新的效果。
7. 只是一個JS函式庫，所以容量小。
8. 容易維護